<form
  name="stepTimeField.form"
  role="form"
  ng-submit="stepTimeField.createIndexPattern()"
>
  <h2 class="euiTitle euiTitle--small">
    Step 2 of 2: Configure settings
  </h2>

  <div class="euiSpacer euiSpacer--m"></div>

  <p class="euiTextColor euiTextColor--subdued">
    You've defined <strong>{{stepTimeField.indexPatternName}}</strong> as your index pattern. Now you can specify some settings before we create it.
  </p>

  <div class="euiSpacer euiSpacer--m"></div>

  <div class="euiFormRow">
    <div class="euiFormLabel">
      <div class="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween">
        <div class="euiFlexItem euiFlexItem--flexGrowZero">
          <label
            id="timeFilterFieldSelectLabel"
            for="timeFilterFieldSelect"
          >
            Time Filter field name
          </label>
        </div>

        <div class="euiFlexItem euiFlexItem--flexGrowZero">
          <a
            ng-if="!stepTimeField.isFetchingTimeFieldOptions"
            class="euiLink euiText euiText--extraSmall timeFieldRefreshButton"
            ng-click="stepTimeField.fetchTimeFieldOptions()"
            kbn-accessible-click
            aria-describedby="timeFilterFieldSelectLabel"
          >
            Refresh
          </a>

          <div
            ng-if="stepTimeField.isFetchingTimeFieldOptions"
            class="euiLoadingSpinner euiLoadingSpinner--small"
            aria-label="Please wait while we fetch your time field options"
            aria-describedby="timeFilterFieldSelectLabel"
          ></div>
        </div>
      </div>
    </div>

    <div class="euiFormControlLayout">
      <select
        ng-show="stepTimeField.canShowMainSelect()"
        id="timeFilterFieldSelect"
        aria-describedby="timeFilterFieldSelectHelpText1 timeFilterFieldSelectHelpText2"
        class="euiSelect euiSelect--large"
        data-test-subj="createIndexPatternTimeFieldSelect"
        ng-disabled="stepTimeField.isTimeFieldSelectDisabled()"
        ng-required="stepTimeField.hasTimeFieldOptions()"
        ng-options="option as option.display disable when option.isDisabled for option in stepTimeField.timeFieldOptions"
        ng-model="stepTimeField.selectedTimeFieldOption"
      ></select>

      <select
        ng-show="stepTimeField.canShowLoadingSelect()"
        id="timeFilterFieldSelect"
        aria-describedby="timeFilterFieldSelectHelpText1 timeFilterFieldSelectHelpText2"
        class="euiSelect euiSelect--large"
        data-test-subj="createIndexPatternTimeFieldSelect"
        disabled="disabled"
      >
        <option>Loading...</option>
      </select>

      <svg
        class="euiIcon euiFormControlLayout__icon euiFormControlLayout__icon--right euiIcon--medium"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="16"
        height="16"
        viewBox="0 0 16 16"
      >
        <defs>
          <path id="arrow_down-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"></path>
        </defs>
        <use fill-rule="nonzero" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow_down-a"></use>
      </svg>

      <p
        ng-if="stepTimeField.canShowNoTimeBasedFieldsMessage()"
        class="euiTextColor euiTextColor--subdued euiText euiText--small"
      >
        The indices which match this index pattern don't contain any time fields.
      </p>
    </div>

    <div
      ng-if="stepTimeField.canShowHelpText()"
      class="euiFormHelpText euiFormRow__text"
      id="timeFilterFieldSelectHelpText1"
    >
      The Time Filter will use this field to filter your data by time.
    </div>

    <div
      ng-if="stepTimeField.canShowHelpText()"
      class="euiFormHelpText euiFormRow__text"
      id="timeFilterFieldSelectHelpText2"
    >
      You can choose not to have a time field, but you will not be able to narrow down your data by a time range.
    </div>
  </div>

  <button
    class="euiButtonEmpty"
    type="button"
    data-id="toggleButton"
    ng-click="stepTimeField.toggleAdvancedOptions()"
  >
    <svg ng-if="!stepTimeField.showAdvancedOptions" class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
    xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
      <defs>
        <path id="arrow_right-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
        />
      </defs>
      <use fill-rule="nonzero" transform="matrix(0 1 1 0 0 0)" href="#arrow_right-a"
      />
    </svg>
    <svg ng-if="stepTimeField.showAdvancedOptions" class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
    xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
      <defs>
        <path id="arrow_down-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
        />
      </defs>
      <use fill-rule="nonzero" href="#arrow_down-a" />
    </svg>
    <span ng-if="stepTimeField.showAdvancedOptions">Hide advanced options</span>
    <span ng-if="!stepTimeField.showAdvancedOptions">Show advanced options</span>
  </button>

  <!-- Index pattern id input -->
  <div class="euiSpacer euiSpacer--xs"></div>
  <div
    ng-if="stepTimeField.showAdvancedOptions"
    class="euiFormRow"
  >
    <div class="euiFormLabel">
      <label
        class="euiLabel"
        for="indexPatternCreationId"
      >
        Custom index pattern ID
      </label>
    </div>
    <div class="euiFormControlLayout">
      <input
        class="euiFieldText euiFieldText--large"
        id="indexPatternCreationId"
        data-test-subj="createIndexPatternIdInput"
        ng-model="stepTimeField.indexPatternId"
        ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }"
        validate-index-pattern
        validate-index-pattern-allow-wildcard
        name="id"
        type="text"
      >
    </div>
    <div class="euiFormHelpText euiFormRow__text">
      <span class="euiTextColor euiTextColor--subdued">
        Kibana will provide a unique identifier for each index pattern.
        If you do not want to use this unique ID, enter a custom one.
      </span>
    </div>
  </div>

  <div class="euiSpacer euiSpacer--m"></div>

  <!-- Actions -->
  <div class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd">
    <div class="euiFlexItem euiFlexItem--flexGrowZero">
      <button
        class="euiButtonEmpty euiButtonEmpty--primary"
        ng-click="stepTimeField.goToPreviousStep()"
      >
        <span class="euiButtonEmpty__content">
          <svg aria-hidden="true" class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
            xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
            <defs>
              <path id="arrow_left-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
              />
            </defs>
            <use fill-rule="nonzero" transform="rotate(90 8 8)" href="#arrow_left-a"
            />
          </svg>
          <span>Back</span>
        </span>
      </button>
    </div>
    <div class="euiFlexItem euiFlexItem--flexGrowZero">
      <button
        data-test-subj="createIndexPatternCreateButton"
        ng-disabled="!stepTimeField.canCreateIndexPattern()"
        class="euiButton euiButton--primary euiButton--fill"
        type="submit"
      >
        <span class="euiButton__content">
          Create index pattern
        </span>
      </button>
    </div>
  </div>
</form>
